<template>
	<view class="msj_login">
		<view class="msj_login_header">
			登录
		</view>
		<u-form :model="form" ref="uForm">
					<u-form-item label="账号" prop="name" >
						<u-input maxlength='11' minlength='11' @change="names" v-model="form.name" placeholder='请输入手机号' />
					</u-form-item>
					<u-form-item label="密码" prop="pass">
						<u-input v-model="form.pass" type='password' :password-icon="true" @change="onpass" placeholder='请输入密码'  />
					</u-form-item>
				</u-form>
				<view class="msj_btn_login">
					<u-button type="warning"  @click="submit">登录</u-button>
					<u-button type="success" style="margin: 20px 0 0;"  @click="zhuce">注册</u-button>
				</view>
				
	</view>
</template>

<script>
	import {getmsjuser} from '../../utils/api.js'
	export default {
		data() {
			return {
				users:[],
				form: {
								name: '',
								pass: '',
				},
				rules: {
								name: [
									{ 
										min:11,
										max:11,
										required: true, 
										message: '请输入账号', 
										trigger: ['change','blur'],
									}
								],
								pass: [
									{
										message: '请输入密码', 
										trigger: ['change','blur']
									}
								]
				}
			}
		},
		onShow(){
			getmsjuser().then(res=>{
					this.users=res.data
					// console.log(this.users);
			})
		},
		onReady() {
				this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			names(val){
				this.form.name=val.replace(/\D/g,'')
				if(!this.form.name){
					this.showToast('账号格式不对')
				}
			},
			onpass(val){
				this.form.pass=val.replace(/\s+/g, '')
			},
			showToast(val){
						uni.showToast({
						icon:'error',
						title: val,
						duration: 2000
					});
						},
			// 前往注册 
			zhuce(){
				uni.navigateTo({
					url: '/pages/zhuce/zhuce'
				});
			},	
			// 登录
			submit() {
				if((this.form.name&&this.form.name.length==11)&&this.form.pass){
					let flag=this.users.find(v=>v.phone==this.form.name)
					// console.log(flag);
					if(flag){
						let f=this.users.find(v=>v.phone==this.form.name&&v.password==this.form.pass)
						if(f){
							uni.showToast({
								icon:'success',
								title: '登录成功',
								duration: 2000,
								success:()=>{
									let t=Math.random().toString(36).slice(-10)+f.phone.slice(0,6)
									let obj={
										userid:f.id,
										tokens:t
									}
									uni.setStorageSync('token', JSON.stringify(obj));
									uni.switchTab({
										url:'/pages/tabbar/tabbar-1/tabbar-1'
									})
								}
							});
						}else{
							this.showToast('密码不正确')
						}
					}else{
						this.showToast('没有此账号!请先注册')
					}
				}else{
					this.showToast('请输入密码、账号')
				}
			}
		}
		
	}
</script>

<style>
	.msj_login{
		width: 100%;
		padding: 70px 0 0;
	}
	.msj_login_header{
		width: 100%;
		position: fixed;
		left: 0;  font-size: 20px;
		top: 0; padding: 12px 0;
		background: #fff;
		text-align: center;
	}
	.u-form-item{
		box-sizing: border-box;
		padding: 0 15px;
	}
	
	.msj_btn_login{
		width: 100%;
		position: fixed;
		bottom: 0; left: 0;
		padding: 30px;
		box-sizing: border-box;
	}
</style>
